<template>
    <div>
        <div class="d1">
            <van-icon name="location-o" style="margin-top: 20px;margin-left: 10px;" /><span>北京市市辖区东城区</span>
        </div>
    </div>
    <van-search v-model="value" shape="round" placeholder="优珍" style="margin-top: 10px;" />
    <div>
        <van-button round type="success" style="background: #fff;color: black;margin-left: 10px;">奶粉</van-button>
        <van-button round type="success" style="background: #fff;color: black;margin-left: 10px;">纸品尿裤</van-button>
        <van-button round type="success" style="background: #fff;color: black;margin-left: 10px;">营养辅食</van-button>
        <van-button round type="success" style="background: #fff;color: black;margin-left: 10px;">玩具</van-button>
        <van-icon name="list-switch" @click="cla" />
    </div>
    <van-grid :gutter="10" style="margin-top: 10px;">
        <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
    </van-grid>
    <div class="logo" style="display: flex;margin-top: 10px;">
        <div class="logo1">
            <img src="../views/img/1_03.gif" alt="" style="width: 180px;height: 200px;"></img>
        </div>
        <div class="logo2">
            <img src="../views/img/2_03.gif" alt="" style="width: 180px;height: 200px;"></img>
        </div>
    </div>
    <div v-for="item in searchApiData">
        <router-link :to="{name:'detail',params:{goods_id:item.goods_id}}">
            <van-card :price="item.goods_price" :title="item.goods_name"
            :thumb="item.goods_small_logo ? item.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />
        </router-link>
    </div>
</template>

<script setup>
import { catitemsApi, searchApi } from '@/api/api';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
let router = useRouter()
let catitemsApiData = ref([])
catitemsApi().then(res => {
    catitemsApiData.value = res.data.message
})
let cla = () => {
    router.push('/home/cla')
}
let searchApiData = ref([])3
let route = useRoute()
searchApi(route.params.query).then(res => {
    searchApiData.value = res.data.message.goods
})
</script>

<style lang="scss" scoped></style>